<template>
  <!-- 权限控制角色 -->
  <div class="">
    <a-card :bordered="false">
      <div class="filter-container">
        <a-button
          type="primary"
          icon="plus"
          class="btn"
          @click="add"
          style="float: right;"
          v-checkBtn="'role:permission:add'">新增角色权限</a-button>
      </div>
      <a-row :gutter="8">
        <a-col :span="24">
          <a-table
            :columns="columns"
            :data-source="dataSource"
            bordered
            :loading="loading"
            :rowKey="(record) => { return record.roleId }"
            :scroll="{ x: true }"
            :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a href="javascript:;" @click="onEdit(record)" v-checkBtn="'role:permission:edit'">编辑</a>
              <a-divider type="vertical" />
              <a href="javascript:;" @click="onDel(record)" v-checkBtn="'role:permission:del'">删除</a>
            </span>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
    <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>
  </div>
</template>

<script>
import { getRoles, deleteRoles } from '@/api/lessee'
import saveModal from './save'
import { Modal } from 'ant-design-vue'
export default {
    components: {
        saveModal
    },
    data () {
        return {
            // 查询参数
            queryParam: {},
            // 表头
            columns: [
                {
                    title: '角色名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center'
                },
                {
                    title: '创建时间',
                    dataIndex: 'fromDate',
                    key: 'fromDate',
                    align: 'center'
                },
                {
                    title: '备注',
                    dataIndex: 'description',
                    key: 'description',
                    align: 'center'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    fixed: 'right',
                    width: 150,
                    scopedSlots: { customRender: 'action' }
                }

            ],

            dataSource: [],
            loading: false,
            dialog: {
                save: false
            }

        }
    },
    mounted () {
        this.tableData()
    },
    methods: {
        tableData () {
            this.loading = true
            getRoles().then(res => {
                if (res.code == 200) {
                    this.dataSource = res.data
                }
                this.loading = false
            }).finally(res => {
                this.loading = false
            })
        },
        // 新增角色
        add () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open()
            })
        },

        // handleCancel() {
        //     this.addVisible = false
        // },
        // handleOk() {
        //     his.addVisible = false
        // },

        // 编辑角色
        onEdit (row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open('edit').setData(row)
            })
        },
        onDel (row) {
            const _this = this
            Modal.confirm({
                title: '删除信息',
                content: '确定要删除吗？',
                onOk: () => {
                    deleteRoles(row.roleId).then(res => {
                        if (res.code == 200) {
                            _this.tableData()
                            _this.$message.success('删除成功')
                        } else {
                            _this.$message.error(res.message)
                        }
                    })
                }
            })
        }

    }
}
</script>

<style lang="less">
.send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
}

.filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
        padding-right: 20px;
        white-space: nowrap;
    }

    .input-container {
        width: 200px;
        margin-right: 20px
    }

    .btn {
        margin-right: 20px;
    }
}

.custom-tree {

    :deep(.ant-menu-item-group-title) {
        position: relative;

        &:hover {
            .btn {
                display: block;
            }
        }
    }

    :deep(.ant-menu-item) {
        &:hover {
            .btn {
                display: block;
            }
        }
    }

    :deep(.btn) {
        display: none;
        position: absolute;
        top: 0;
        right: 10px;
        width: 20px;
        height: 40px;
        line-height: 40px;
        z-index: 1050;

        &:hover {
            transform: scale(1.2);
            transition: 0.5s all;
        }
    }
}
</style>
